<div class="widgets">
  <div class="row">
    <div class="col-xl-3 col-lg-6 col-md-6">
      <ba-card cardTitle="Flat Buttons" baCardClass="with-scroll button-panel">
        <flat-buttons></flat-buttons>
      </ba-card>
    </div>
    <div class="col-xl-3 col-lg-6 col-md-6">
      <ba-card cardTitle="Raised Buttons" baCardClass="with-scroll button-panel">
        <raised-buttons></raised-buttons>
      </ba-card>
    </div>
    <div class="col-xl-3 col-lg-6 col-md-6">
      <ba-card cardTitle="Different Sizes" baCardClass="with-scroll button-panel df-size-button-panel">
        <sized-buttons></sized-buttons>
      </ba-card>
    </div>
    <div class="col-xl-3 col-lg-6 col-md-6">
      <ba-card cardTitle="Disabled" baCardClass="with-scroll button-panel">
        <disabled-buttons></disabled-buttons>
      </ba-card>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">

      <ba-card cardTitle="Icon Buttons" baCardClass="with-scroll">
        <icon-buttons></icon-buttons>
      </ba-card>

      <ba-card cardTitle="Large Buttons" baCardClass="with-scroll large-buttons-panel">
        <large-buttons></large-buttons>
      </ba-card>

    </div>
    <div class="col-md-6">

      <ba-card cardTitle="Button Dropdowns" baCardClass="with-scroll">
        <dropdown-buttons></dropdown-buttons>
      </ba-card>

      <ba-card cardTitle="Button Groups" baCardClass="with-scroll">
        <group-buttons></group-buttons>
      </ba-card>

    </div>
  </div>

  <div class="row">
    <div class="col-md-12"
         ba-panel
         ba-panel-title="Progress Buttons"
         ba-panel-class="with-scroll">
      <div ng-include="'app/pages/ui/buttons/widgets/progressButtons.html'"></div>
    </div>
  </div>

</div>
